import { Button, Form, Input } from "antd";
import "./style.less";
import { doRegister } from "@/api/modules/system";
import { Login } from "@/api/interface";

const register: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: Login.RegisterParams) => {
    doRegister(values);
  };

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
    },
  };

  return (
    <>
      <div className="w-full h-full">
        {/* 背景动画 */}
        <video autoPlay loop muted>
          <source
            src="http://124.220.178.165:9528/video/bizhi2.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>

        {/* 信息框 */}
        <div className="register-form-container">
          <h1 className=" text-center text-white text-[28px]">注册账户</h1>
          <Form
            {...formItemLayout}
            form={form}
            name="register"
            onFinish={onFinish}
            scrollToFirstError
            style={{ width: 400 }}
            className="mt-10"
          >
            {/* 用户名 */}
            <Form.Item
              name="username"
              label="用户名"
              rules={[
                {
                  type: "string",
                  pattern: /^[\u4E00-\u9FFF\w]{4,24}$/,
                  message: "输入的字符不合法!",
                },
                {
                  required: true,
                  message: "请输入用户名!",
                },
              ]}
              hasFeedback
            >
              <Input placeholder="4-24字母、数字、中文组成" />
            </Form.Item>

            {/* 密码 */}
            <Form.Item
              name="password"
              label="密码"
              rules={[
                {
                  required: true,
                  pattern: /^[A-Za-z0-9_]{8,24}$/,
                  message: "输入的字符不合法!",
                },
                {
                  required: true,
                  message: "请输入密码",
                },
              ]}
              hasFeedback
            >
              <Input.Password placeholder="限制为6-24为字母、数字下划线组合" />
            </Form.Item>
            {/* 邮箱 */}
            <Form.Item
              name="email"
              label="邮箱"
              rules={[
                {
                  type: "email",
                  message: "输入的字符不合法!",
                },
                {
                  required: true,
                  message: "请输入有效的邮箱!",
                },
              ]}
              hasFeedback
            >
              <Input placeholder="限制为8-24为字母、数字下划线组合" />
            </Form.Item>

            {/* 手机号码 */}
            <Form.Item
              name="phoneNumber"
              label="电话"
              rules={[
                {
                  type: "string",
                  pattern: /^1[3456789]\d{9}$/,
                  message: "号码不合法!",
                },
                { required: true, message: "请输入电话号码!" },
              ]}
              hasFeedback
            >
              <Input
                style={{ width: "100%" }}
                placeholder="中国大陆11位手机号"
              />
            </Form.Item>

            {/* 注册按钮 */}
            <div className="w-full flex justify-center gap-2">
              <Button type="default" htmlType="submit">
                提交注册
              </Button>
              <Button type="default" htmlType="submit">
                返回上一页
              </Button>
            </div>
            {/* <Form.Item>
              <div className="w-full flex justify-center gap-2">
                
              </div>
            </Form.Item> */}
          </Form>
        </div>
      </div>
    </>
  );
};

export default register;
